<template>
  <div class="wrapper">
    <el-card>
      <div class="rowDiv">
        <div class="row-left">
          <div class="row-item">
            收银商品名称:<el-select
              v-model="state.waretype"
              placeholder="选择收银商品"
            >
              <el-option label="仓库1" value="001"></el-option>
              <el-option label="仓库2" value="002"></el-option>
            </el-select>
          </div>
        </div>
        <div class="row-right">
          <el-button type="primary" @click="new_loss">创建成本卡</el-button>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template #default="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="所属店铺">
                <span>{{ props.row.shop }}</span>
              </el-form-item>
              <el-form-item label="商品 ID">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="店铺 ID">
                <span>{{ props.row.shopId }}</span>
              </el-form-item>
              <el-form-item label="商品分类">
                <span>{{ props.row.category }}</span>
              </el-form-item>
              <el-form-item label="店铺地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{{ props.row.desc }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="收银商品编码" prop="id"> </el-table-column>
        <el-table-column label="收银商品名称" prop="name"> </el-table-column>
        <el-table-column label="收银商品规格" prop="desc"> </el-table-column>
        <el-table-column label="收银商品售价" prop="desc"> </el-table-column>
        <el-table-column label="操作" prop="desc">
          <template>
            <el-button type="primary">编辑</el-button>
            <el-button type="primary">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex">
        <el-col :span="24">
          <Page
            v-if="state.totalPage"
            :totalPage="state.totalPage"
            @changePage="changePage"
          ></Page>
        </el-col>
      </el-row>
      <!-- 创建成本卡弹窗 -->
      <el-drawer
        title="创建成本卡"
        v-model="state.drawer"
        :direction="direction"
        :before-close="handleClose"
        destroy-on-close
        size="50%"
      >
        <div class="conTxt">
          <el-row type="flex" align="middle">
            <el-col :span="3">父类收银商品:</el-col>
            <el-col :span="6">
              <el-select
                v-model="state.form.parent_pro"
                placeholder="选择父类收银商品"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-button type="text" disabled>收银商品信息</el-button>
          <el-table :data="state.cashTable" border style="width: 100%">
            <el-table-column prop="date" label="收银商品编号">
              <template v-slot="scope">
                <el-input></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="收银商品名称">
              <template v-slot="scope">
                <el-input></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="规格">
              <template v-slot="scope">
                <el-input></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="售价">
              <template v-slot="scope">
                <el-input></el-input>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="text" disabled>原料商品信息</el-button>
          <!-- 商品的选项 -->
          <el-tabs v-model="state.childitem" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first"> </el-tab-pane>
            <el-tab-pane label="配置管理" name="second"></el-tab-pane>
            <el-tab-pane label="角色管理" name="third"></el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth"></el-tab-pane>
          </el-tabs>
          <el-button type="primary" style="margin-bottom: 12px"
            >添加商品</el-button
          >
          <el-table :data="state.cashTable" border style="width: 100%">
            <el-table-column prop="date" label="原料商品编号">
              <template v-slot="scope">
                <el-input></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="原料商品名称">
              <template v-slot="scope">
                <el-input></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="用量">
              <template v-slot="scope">
                <el-input></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="单价">
              <template v-slot="scope">
                <el-input></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="成本">
              <template v-slot="scope">
                <el-input></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template v-slot="scope">
                <el-button type="text">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row
            type="flex"
            justify="space-around"
            style="margin:auto;margin-top: 26px;width:20%;"
          >
            <el-span :span="12"
              ><el-button @click="state.drawer = false"
                >取 消</el-button
              ></el-span
            >
            <el-span :span="12">
              <el-button type="primary" @click="create()"
                >提 交</el-button
              ></el-span
            >
          </el-row>
        </div>
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import searchDiv from "@/components/Search.vue";
import Page from "@/components/Pagination.vue";
export default {
    name:"cost_card",
  components: { searchDiv, Page },
  props: {},
  setup() {
    let multipleTable = ref("null");
    const router = useRouter();
    let state = reactive({
      title: "",
      common_id: "",
      option_type: "",
      drawer: false,
      totalPage: '',
      placeholder: "请输入您要搜索的内容",
      searchval: "",
      cashTable: "",
      childitem: "",
      form: {
        parent_pro: "",
        pro_name: "",
        batch_num: "",
        Inventory_num: "",
        loss_num: "",
        loss_price: "",
        loss_reason: "",
      },
      pageChecked: false,
      multipleSelection: [],
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
          zip: 200333,
        },
      ],
    });
    function new_loss() {
      state.title = "新建报损";
      state.option_type = true;
      state.drawer = true;
    }
    function editRow(item) {
      state.title = "编辑";
      state.option_type = false;
      state.drawer = true;
      state.common_id = item.name;
    }
    //表格选择
    function handleSelectionChange(val) {
      state.multipleSelection = val;
    }
    //全选
    function checkAll() {
      state.multipleSelection = [];
      if (state.pageChecked) {
        multipleTable.value.toggleAllSelection();
        state.multipleSelection.push(state.tableData.filter((v) => v.date));
      } else {
        multipleTable.value.clearSelection();
        state.multipleSelection = [];
      }
    }
    // 创建仓库
    return {
      new_loss,
      editRow,
      multipleTable,
      handleSelectionChange,
      state,
      checkAll,
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100%;
  .conTxt {
    padding: 20px;
  }
  .el-card {
    height: 100%;
    .cart-title::before {
      content: " ";
      width: 4px;
      height: 20px;
      background: #1890ff;
      background: #1890ff;
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
    }
    .rowDiv {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      margin-bottom: 20px;
      .row-left {
        display: flex;
        width: 70%;
        justify-content: space-between;
        .row-item {
          display: flex;
          align-items: center;
          white-space: nowrap;
        }
      }
      .row-right {
        width: 15%;
        display: flex;
        justify-content: flex-end;
      }
    }
    .el-table /deep/ th {
      background-color: #eaeaea;
      text-align: center;
    }
    .el-table /deep/ td {
      text-align: center;
    }
    .el-select {
      width: 100%;
    }
  }
}
</style>